import React, { Component } from "react";
import Form from "./Form";
import List from "./List";

class App extends Component {
  state = {
    list: [],
  };

  getItem = (val) => {
    this.setState((prevState) => {
      return {
        list: [
          ...prevState.list,
          {
            name: val,
            id: new Date().getTime(),
          },
        ],
      };
    });
  };

  removeItem = (id) => {
    return () => {
      this.setState({
        list: this.state.list.filter((item) => item.id !== id),
      });
    };
  };

  render() {
    const { list } = this.state;
    return (
      <>
        <h3>todolist</h3>
        <Form onGetItem={this.getItem} />
        <List list={list} onRemoveItem={this.removeItem} />
      </>
    );
  }
}

export default App;
